<template>
  <div class="single">
    <div
      v-for="(item, index) in body.questionContent_arr"
      :key="index"
      class="questionContent_arr"
    >
      <div v-html="item" v-if="item != '<br/>'"></div>
    </div>
    <!-- 选项 -->
    <div v-if="body.chooseanswer_arr" class="chooseanswer_arr">
      <div
        class="choose"
        v-for="(item, index) in body.question_type == $parent.N_298
          ? body.chooseanswer_arr
          : body.body_json.chooseanswer_more"
        :key="index"
        @click="chooseAnswer(item, index)"
        style="display: flex;"
      >
        <div style="margin-right:10px;" class="choose-item">
          {{ item.name }}
        </div>
        <div v-html="item.content" class="f14 flex1"></div>
      </div>
    </div>
    <!-- 答案 -->
    <div v-if="body.solution_arr" class="f14 color_red">
      答案：{{ body.solution_arr }}
    </div>
  </div>
</template>
<script>
import _ from 'underscore'
export default {
  props: {
    body: {
      default: function () {
        return {
          className: 'single event_question',
          answer: []
        }
      }
    }
  }
}
</script>

<style lang="scss">
.single {
  font-size: 14px;
  line-height: 40px;
  .questionContent_arr {
    img {
      padding: 10px 0;
    }
  }
  .chooseanswer_arr {
    margin-top: 28px;
  }
  .myAnswer {
    padding: 14px;
    padding-left: 0;
    color: #de394a;
  }
  .color_red {
    color: #de394a;
  }
  .f14 {
    p {
      margin: 0;
    }
  }
  .flex1 {
    flex: 1;
  }
  .progress {
    background: rgba(255, 255, 255, 1);
    padding-top: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .onecircle {
      margin-right: 24px;
    }
  }
  .choose {
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    .choose-item {
      width: 26px;
      height: 26px;
      border: 2px solid rgba(51, 51, 51, 1);
      border-radius: 50%;
      text-align: center;
      line-height: 26px;
      color: #333;
      margin: 7px 0px;
    }
    .choose-active {
      border: 2px solid #ffbe33;
      background: #ffbe33;
      color: #333;
    }
  }
}
.single-move {
  font-size: 0.18rem;
  line-height: 0.28rem;
  .questionContent_arr {
    img {
      padding: 0.2rem 0;
    }
  }
  .chooseanswer_arr {
    margin-top: 0.28rem;
  }
  .myAnswer {
    padding: 0.14rem;
    padding-left: 0;
  }
  .f14 {
    p {
      margin: 0;
    }
  }
  .progress {
    background: rgba(255, 255, 255, 1);
    padding-top: 0.1rem;
    border-radius: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .onecircle {
      margin-right: 0.24rem;
    }
  }
  .choose {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    cursor: pointer;
    .choose-item {
      font-size: 0.16rem;
      width: 0.26rem;
      height: 0.26rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.02rem solid rgba(51, 51, 51, 1);
      border-radius: 100%;
      color: #333;
    }
    .choose-active {
      border: 0.02rem solid #ffbe33;
      background: #ffbe33;
      color: #333;
    }
  }
}
</style>
